<template>
  <basic-dialog :visible="show"
                minWidth="800px"
                :title="`${this.type === 'concession' ? '让步' : '不良'}填报记录`"
                isShowClose
                isFullScreen
                :isShowInnerLoading='isTableLoading'
                @close="closeDialog">
    <div class="flex items-center justify-between padding-20">
      <div class="flex-1">加工班次：{{subData.shiftName}}</div>
      <div class="flex-1">报检数量：{{subData.qualityControlCount}}</div>
      <div class="flex-1">质检数量：{{subData.qualityCount}}</div>
      <div class="flex-1">不良数量：{{subData.defectiveCount}}</div>
<!--      <div class="flex-1">让步数量：{{subData.compromiseCount}}</div>-->
    </div>
    <q-table :data="tableData"
      :columns="tableColumns"
      row-key="id"
      class="stick-last-col myTable scrollbar"
      style="height: 400px"
      separator="horizontal"
      :pagination.sync="pagination"
      :hide-bottom="tableData.length !== 0"
      color="primary">
      <template v-slot:body-cell-operations="props">
        <q-td class="operations"
              style="width: 100px">
          <div class="btn-group"
               style="text-align: center">
            <table-btn btn-type="edit" @click="onEditor(props.row)" :permission="Enums.SYS_PERMISSION.EDIT_BAD_NUM_BTN.value"/>
            <table-btn btn-type="delete"
                       @click="onDelete(props.row)"
                       :permission="Enums.SYS_PERMISSION.DEL_BAD_NUM_BTN.value"
                       tips="确定要删除此项吗？"/>
          </div>
        </q-td>
      </template>
    </q-table>
    <div class="addBtn">
      <q-btn flat
             dense
             color="primary"
             class="full-height full-width block"
             :disable="subData.qualityControlCount === 0 || subData.qualityControlCount === (subData.defectiveCount + subData.compromiseCount)"
             v-has="{id: Enums.SYS_PERMISSION.ADD_BAD_NUM_BTN.value}"
             @click="onAdd">
        <q-icon name="iconfont icontubiao-39" style="font-size: 18px" />
        <span class="text-black margin-l-10">添加</span>
      </q-btn>
    </div>
    <bad-editor-dialog ref="editorDialog" @getList="getList"/>
  </basic-dialog>
</template>

<script>
import { getQualitySubCauses, delQualityCauses } from 'src/boot/job/quality-order'
import badEditorDialog from './bad-editor-dialog'
import _ from 'lodash'
export default {
  name: 'bad-quantity-dialog',
  components: {
    badEditorDialog
  },
  data () {
    return {
      show: false,
      reloadList: false, // 刷新列表
      type: '',
      recordData: {},
      subData: {}, // 子质检单数据
      isTableLoading: false,
      open: false, // 编辑弹窗
      isAdd: false, // 显示编辑or添加
      tableData: [],
      // 表格不分页
      pagination: {
        rowsPerPage: 0
      }
    }
  },
  computed: {
    tableColumns (type) {
      const colums = [
        { name: 'index', field: 'index', label: '序号', align: 'left' },
        { name: 'gname', field: 'gname', label: `${this.type === 'concession' ? '让步' : '不良'}类型`, align: 'left' },
        { name: 'causeName', field: 'causeName', label: `${this.type === 'concession' ? '让步' : '不良'}原因`, align: 'left' },
        { name: 'count', field: 'count', label: '数量', align: 'left' },
        { name: 'name', field: 'name', label: '质检人', align: 'left' },
        { name: 'remarkString', field: 'remarkString', label: '说明', align: 'left' },
        { name: 'improveStrategy', field: 'improveStrategyStr', label: '改善对策', align: 'left' },
        { name: 'operations', field: 'operations', label: '操作', align: 'left' }
      ]
      let cloneArr = _.cloneDeep(colums)
      cloneArr = cloneArr.filter(item => item.name !== 'gname' && item.name !== 'improveStrategy')
      return this.type === 'concession' ? cloneArr : colums
    }
  },
  methods: {
    showDialog (data, type, subData) {
      this.show = true
      this.type = type
      this.recordData = data
      this.subData = subData
      this.getQualityCauses()
    },
    // 获取不良/让步详细
    getQualityCauses () {
      this.isTableLoading = true
      const inputType = this.type === 'concession' ? '2' : '1'
      getQualitySubCauses(inputType, this.subData.id).then(res => {
        res.causeList.map((v, i) => {
          const item = v
          item.index = i + 1 // 序号
          item.causeId = v.causeId // 原因id
          item.causeName = this.$utils.label(v.causeName) // 原因名称
          item.count = v.count // 数量
          item.createTime = v.createTime // 录入时间
          item.gid = v.gid
          item.gname = this.$utils.label(v.gname) // 原因类型名称
          item.id = v.id // 质检原因id
          item.name = this.$utils.label(v.qualityControlPersonalName) // 操作员
          item.remarkString = this.$utils.label(v.remark) // 备注
          item.improveStrategyStr = this.$utils.label(v.improveStrategy) // 备注
          item.improveStrategy = v.improveStrategy
          item.remark = v.remark
          return item
        })
        this.subData.qualityControlCount = res.qualityControlCount
        this.subData.defectiveCount = res.defectiveCount
        this.subData.compromiseCount = res.compromiseCount
        this.tableData = res.causeList
        this.isTableLoading = false
      }).finally(() => {
        this.isTableLoading = false
      })
    },
    // 添加
    onAdd () {
      this.$refs.editorDialog.showDialog(this.recordData, this.type, true, this.subData)
      // this.isAdd = true
      // this.open = true
    },
    // 编辑
    onEditor (data) {
      this.$refs.editorDialog.showDialog(this.recordData, this.type, false, this.subData, data)
      // this.open = true
      // this.isAdd = false
      // this.editorData = row
    },
    // 关闭弹窗
    closeDialog () {
      this.show = false
      this.tableData = []
      this.reloadList && (this.$emit('getList'))
      this.reloadList = false
    },
    // 删除
    async onDelete (row) {
      // this.$utils.showMessage('icontubiao-28', '确定要删除此项吗？', () => {
      this.isTableLoading = true
      const { id, causeName } = row
      const params = {
        id: id,
        label: causeName
      }
      try {
        await delQualityCauses(params)
        this.$message.success('删除成功')
      } catch (_) {
      }
      this.getList()
      // }, true)
    },
    getList () {
      this.reloadList = true
      this.getQualityCauses()
    }
  }
}
</script>

<style scoped lang="stylus">
.addBtn
  width 100%
  text-align center
  border-bottom 1px solid #eee
  height: 48px
  line-height 48px
</style>
